<template>
  <div>
    <van-row>
      <form action="/">
        <van-search v-model="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel" />
      </form>
    </van-row>
   <!--搜索框内容展示  -->
    <div v-for="item in list" :key="item.id"> 
    <van-swipe-cell >
      <van-cell :border="false" :title="item.name" :value="item.ctime.slice(0, 10)" />
      <template slot="right">
        <van-button square type="danger" text="删除" @click="onClose(item.id)" />
      </template>
    </van-swipe-cell>
    </div>
    <!-- </div> -->

    <!-- 搜索历史 -->
    <div v-show="showBox">
      <van-row class="searchhisetory">
        <div class="searchhistory">
          <span class="">搜索历史</span>
          <van-icon name="delete"  @click="clearhistory" />
        </div>
      </van-row>
      <van-row class="searchresult">
        <span v-for="item in history" :key="item.id" class="result" @click="tabs(item)">
          {{ item }}
        </span>
      </van-row>
    </div>
  </div>
</template>
<script>
import { log } from "util";
export default {
  data() {
    return {
      value: "",
      // 搜索到的类容
      list: [],
      // 历史记录
      history: ["Apple", "surface"],
      // clearable:true
      showBox: true
    };
  },
  methods: {
    //获取搜索结果
    async onSearch() {
      this.showBox = false;
      if (this.value.trim() !== "") {
        const { data: res } = await this.$http.get("/api/getprodlist");
        this.list = res.message;
        this.history.push(this.value);
      }
    },
    //删除搜索到的商品id
    onClose(id) {
      this.$dialog.confirm({
          message: "确定删除吗？"
        })
        .then(async() => {
          const { data:res } = await this.$http.get(`/api/delproduct/${id}`);
          if (res.status !== 0) return this.$toast.fail("商品删除失败");
            this.onSearch();
            this.$toast.success("商品删除成功");
        });
    },
    onCancel() {
      this.list = [];
      this.showBox = true;
    },
    //搜索历史
    clearhistory() {
      this.history = [];
    },
    tabs(val){
      this.value=val;
    }
  }
};
</script>
<style lang="less" scoped>
.searchshow {
  box-sizing: border-box;
}
.faname {
  width: 100%;
  height: 40px;
  display: flex;
  span {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 23px;
  }
}
.fl {
  flex: 1;
  height: 100%;
  text-align: left;
  font-size: 20px;
  line-height: 40px;
}
.fr {
  flex: 1;
  text-align: right;
  font-size: 12px;
  line-height: 21px;
}
.clsbtn {
  width: 20%;
  background-color: red;
  margin-left: 8px;
  font-size: 14px;
}
.clsbtn button {
  border: 0;
  width: 100%;
  height: 100%;
  background: red;
  color: #fff;
}
.searchhisetory {
  padding: 0px 10px;
  // display: none;
}
.searchhistory {
  display: flex;
  justify-content: space-between;
  margin: 10px 15px;
}
.searchresult {
  text-align: left;
  margin: 0 10px;
  .result {
    display: inline-block;
    background-color: rgba(54, 51, 51, 0.3);
    color: #fff;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 5px;
    padding:3px;
    margin-top: 3px;
  }
}
</style>
